victory-voronoi

VictoryVoronoi

victory-voronoi@^30.0.0 exports VictoryVoronoi and Voronoi components

View these docs at https://formidable.com/open-source/victory/docs/victory-voronoi to see live examples.

VictoryVoronoi renders a dataset as a series polygons optimized for the nearest data point. VictoryVoronoi can be composed with VictoryChart to create voronoi overlays for charts, which are useful for attaching events to pieces of data that are otherwise difficult to interact with, usually due to their size.

<VictoryChart
  theme={VictoryTheme.material}
  domain={{ x: [0, 5], y: [0, 7] }}
>
  <VictoryVoronoi
    style={{ data: { stroke: "#c43a31", strokeWidth: 2 } }}
    data={[
      { x: 1, y: 2 },
      { x: 2, y: 3 },
      { x: 3, y: 5 },
      { x: 4, y: 4 },
      { x: 5, y: 7 }
    ]}
  />
</VictoryChart>

Props

animate

type: boolean || object

VictoryVoronoi uses the standard animate prop. Read about it here

See the Animations Guide for more detail on animations and transitions

animate={{
  duration: 2000,
  onLoad: { duration: 1000 }
}}

categories

type: array[string] || { x: array[string], y: array[string] }

VictoryVoronoi uses the standard categories prop. Read about it in detail here

categories={{ x: ["dogs", "cats", "mice"] }}

containerComponent

type: element

VictoryVoronoi uses the standard containerComponent prop. Read about it in detail here

containerComponent={<VictoryVoronoiContainer dimension="x"/>}

data

type: array[object]

VictoryVoronoi uses the standard data prop. Read about it in detail here

See the Data Accessors Guide for more detail on formatting and processing data.

<VictoryVoronoi
  style={{ data: { stroke: "#c43a31", strokeWidth: 2 } }}
  data={[
    { x: 1, y: 2 },
    { x: 2, y: 3 },
    { x: 3, y: 5 },
    { x: 4, y: 4 },
    { x: 5, y: 6 }
  ]}
/>

dataComponent

type: element

VictoryVoronoi uses the standard dataComponent prop. Read about it in detail here

VictoryVoronoi supplies the following props to its dataComponent: data, datum, index, origin, polar, polygon, scale, size, style, x, y

See the Custom Components Guide for more detail on creating your own dataComponents

default: <Voronoi/>

dataComponent={<Voronoi events={{ onClick: handleClick }}/>}

domain

type: array[low, high] || { x: [low, high], y: [low, high] }

VictoryVoronoi uses the standard domain prop. Read about it in detail here

domain={{x: [0, 100], y: [0, 1]}}

domainPadding

type: number || array[left, right] || { x: [left, right], y: [bottom, top] }

VictoryVoronoi uses the standard domainPadding prop. Read about it in detail here

domainPadding={{x: [10, -10], y: 5}}

eventKey

type: string || integer || array[string] || function

VictoryVoronoi uses the standard eventKey prop to specify how event targets are addressed. This prop is not commonly used. Read about the eventKey prop in more detail here

eventKey="x"

events

type: array[object]

VictoryVoronoi uses the standard events prop. Read about it in more detail here

See the Events Guide for more information on defining events.

<div>
  <h3>Click Me</h3>
  <VictoryVoronoi
    style={{ data: { stroke: "#c43a31", strokeWidth: 2 } }}
    events={[{
      target: "data",
      eventHandlers: {
        onClick: () => {
          return [{
            target: "data",
            mutation: (props) => {
              const fill = props.style && props.style.fill;
              return fill === "black" ? null : { style: { fill: "black" } };
            }
          }];
        }
      }
    }]}
    data={sampleData}
  />
</div>

externalEventMutations

type: array[object]

VictoryVoronoi uses the standard externalEventMutations prop. Read about it in detail

groupComponent

type: element

VictoryVoronoi uses the standard groupComponent prop. Read about it in detail here

default: <g/>

groupComponent={<g transform="translate(10, 10)" />}

height

type: number

VictoryVoronoi uses the standard height prop. Read about it in detail here

default (provided by default theme): height={300}

height={400}

labelComponent

type: element

VictoryVoronoi uses the standard labelComponent prop. Read about it in detail here

default: <VictoryLabel/>

<VictoryVoronoi
  data={sampleData}
  style={{
    data: { stroke: "#c43a31", strokeWidth: 2 },
    labels: { fontSize: 18}
  }}
  labels={(datum) => datum.y}
  labelComponent={<VictoryLabel dx={-10}/>}
/>

labels

type: array || function

VictoryVoronoi uses the standard labels prop to define labels for each point. Read about it in more detail here

<VictoryVoronoi
  data={sampleData}
  style={{
    data: { stroke: "#c43a31", strokeWidth: 2 },
    labels: { fontSize: 18}
  }}
  labels={(datum) => `y: ${datum.y}`}
/>

maxDomain

type: number || { x: number, y: number }

VictoryVoronoi uses the standard maxDomain prop. Read about it in detail

minDomain

type: number || { x: number, y: number }

VictoryVoronoi uses the standard minDomain prop. Read about it in detail

name

type: string

The name prop is used to reference a component instance when defining shared events.

name="series-1"

origin

type: { x: number, y: number }

The origin prop is only used by polar charts, and is usually controlled by VictoryChart. It will not typically be necessary to set an origin prop manually

Read about the origin prop in detail

padding

type: number || { top: number, bottom: number, left: number, right: number }

VictoryVoronoi uses the standard padding prop. Read about it in detail here

default (provided by default theme): padding={50}

padding={{ top: 20, bottom: 60 }}

polar

type: boolean

VictoryVoronoi uses the standard polar prop. Read about it in detail here

Note: Polar Charts are not yet supported for VictoryVoronoi

range

type: array[low, high] || { x: [low, high], y: [low, high] }

The range prop is usually controlled by VictoryChart. It will not typically be necessary to set a range prop manually

Read about the range prop in detail

samples

type: number

VictoryVoronoi uses the standard samples prop to generate data when plotting functions. Read about it in more detail here

default: samples={50}

samples={100}

scale

type: scale || { x: scale, y: scale }

VictoryVoronoi uses the standard scale prop. Read about it here Options for scale include "linear", "time", "log", "sqrt" and the d3-scale functions that correspond to these options.

default: scale="linear"

scale={{x: "linear", y: "log"}}

sharedEvents

The sharedEvents prop is used internally to coordinate events between components. It should not be set manually.

singleQuadrantDomainPadding

type: boolean || { x: boolean, y: boolean }

VictoryVoronoi uses the standard singleQuadrantDomainPadding prop. Read about it here

size

type: number

The size prop determines the maximum size of each voronoi area. When this prop is given, a circular area of the specified size will be rendered, and clipped where it would overlap with other voronoi areas. If this prop is not given, the entire voronoi area will be used.

<VictoryVoronoi
  style={{
    data: { stroke: "#c43a31", strokeWidth: 2 }
  }}
  data={sampleData}
  size={50}
/>

sortKey

type: string || integer || array[string] || function

VictoryVoronoi uses the standard sortKey prop to determine how data should be ordered. Read about it in more detail here

sortKey="x"

sortOrder

type: "ascending" || "descending"

The sortOrder prop specifies whether sorted data should be returned in ascending or descending order.

default: sortOrder="ascending"

standalone

type: boolean

VictoryVoronoi uses the standard standalone prop. Read about it in detail here

note: When VictoryVoronoi is nested within a component like VictoryChart, this prop will be set to false

default: standalone={true}

<svg width={300} height={300}>
  <circle cx={150} cy={150} r={150} fill="#c43a31"/>
  <VictoryVoronoi
    standalone={false}
    width={300} height={300} padding={10}
    style={{ data: { stroke: "black", strokeWidth: 2 } }}
    data={sampleData}
  />
</svg>

style

type: { parent: object, data: object, labels: object }

VictoryVoronoi uses the standard style prop. Read about it in detail here

default (provided by default theme): See grayscale theme for more detail

<VictoryVoronoi
  style={{
    data: {
      stroke: "#c43a31", strokeWidth: 3
    },
    labels: {
      fontSize: 15, fill: "#c43a31", padding: 15
    }
  }}
  size={50}
  data={sampleData}
  labels={(datum) => datum.x}
/>

theme

type: object

VictoryVoronoi uses the standard theme prop. Read about it in detail here

See the Themes Guide for information about creating custom themes.

default: theme={VictoryTheme.grayscale}

theme={VictoryTheme.material}

width

type: number

VictoryVoronoi uses the standard width prop. Read about it in detail here

default (provided by default theme): width={450}

width={400}

x

type: string || integer || array[string] || function

VictoryVoronoi uses the standard x data accessor prop. Read about it in detail here

See the Data Accessors Guide for more detail on formatting and processing data.

x="employee.name"

y

type: string || integer || array[string] || function

VictoryVoronoi uses the standard y data accessor prop. Read about it in detail here

See the Data Accessors Guide for more detail on formatting and processing data.

y={(d) => d.value + d.error}

y0

type: string || integer || array[string] || function

It is not common to set a y0 prop with VictoryVoronoi, as baselines for VictoryVoronoi are only relevant for stacked charts. Read more about the y0 prop here